<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			{{msg}}
			<!--先勾选b，点击“改变位置”-->
			<p v-for="item in list" :key="item.id">
				<label><input type="checkbox" />{{item.title}}</label>
			</p>
			<button @click="change">改变位置</button>
		</div>
		<script src="./node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let app = new Vue({
				el: '#app',
				data: {
					msg: 'hello vue',
					list: [{
							id: 1,
							title: "a"
						},
						{
							id: 2,
							title: "b"
						},
						{
							id: 3,
							title: "c"
						}
					]
				},
				methods: {
					change() {
						this.list = [{
								id: 2,
								title: "b"
							},
							{
								id: 1,
								title: "a"
							},
							{
								id: 3,
								title: "c"
							}
						]
					}
				}
			})
		</script>

	</body>
</html>
